<template>
	<div class="rx-datepicker__date">
		<div class="rx-datepicker__date-topbar">
			<a class="topbar-btn" @click="getYear(-1)">上年</a>
			<a class="topbar-btn" @click="getMonth(-1)">上月</a>
			<div class="topbar-info">
				<span class="topbar-info__year">{{year}}</span>
				<span>年</span>
				<span class="topbar-info__month">{{monthName}}</span>
				<span>月</span>
			</div>
			<a class="topbar-btn" @click="getMonth(1)">下月</a>
			<a class="topbar-btn" @click="getYear(1)">下年</a>
		</div>
		<div class="week-list date-picker-content">
			<ul>
				<li v-for="item in weeks">{{item}}</li>
			</ul>
		</div>
		<div class="date-list date-picker-content">
			<table border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr v-for="week in days" :class="{hoverd:isWeek}">
						<td v-for="(item,index) in week" >
							<span class="date-picker-days"
							:class="{'today': item.day === tDay && item.year === tYear && item.month === tMonth
							,'active' : item.day === vDay && item.month === vMonth && item.year === vYear
							,'otherM': item.day<=0||item.day>lastDay
							,'weekDay':(index+1)%7 === 6 || index%7 === 6}"
							 @click="select(item)">{{item.name}}</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="button-toolbar date-picker-content" >
			<div class="pull-right">
				<a class="btn pointer" @click="empty" v-if="!required">清空</a>
				<a class="btn btn-blue pointer" @click="getToday">今天</a>
			</div>
		</div>
	</div>
</template>
<script>
var debugging = true;
//选择日期
export default {
  props: ["value", "required", "isWeek"],
  data() {
    var today = new Date();
    return {
      //今天的年月日
      tYear: today.getFullYear(),
      tMonth: today.getMonth(),
      tDay: today.getDate(),
      //星期
      weeks: ["一", "二", "三", "四", "五", "六", "日"],
      //当前选中的日期
      vYear: "",
      vMonth: "",
      vDay: "",
      //显示的日期
      year: "",
      month: "",
      monthName: "",
      days: [],
      lastDay: ""
    };
  },
  watch: {
    timestamp() {
      this.init();
    }
  },
  methods: {
    init() {
      debugging && console.log("===pickerdate activated===");
      //重置
      Object.assign(this, this.$options.data());
      var year = this.tYear,
        month = this.tMonth;
      //读取当前选中的日期

      var val = this.value;
      if (val) {
        var date = new Date(val);
        year = this.vYear = date.getFullYear();
        month = this.vMonth = date.getMonth();
        this.vDay = date.getDate();
      }

      //根据当前年月生成日历
      this.year = year;
      this.month = month;
      this.monthName = month + 1;
      this.days = getDays(year, month);
      this.lastDay = new Date(year, month + 1, 0).getDate();
    },

    getYear(num) {
      num = +num;
      var year = (this.year = +this.year + num),
        month = this.month;
      this.days = getDays(year, month);
      this.lastDay = new Date(year, month + 1, 0).getDate();
    },
    getMonth(num) {
      num = +num;
      var year = this.year,
        month = +this.month + num;
      this.days = getDays(year, month);
      var lastDate = new Date(year, month + 1, 0);
      this.lastDay = lastDate.getDate();
      //跨年，重新赋值年月
      month = this.month = lastDate.getMonth();
      this.monthName = month + 1;
      this.year = lastDate.getFullYear();
    },
    select(item) {
      this.$emit("select", new Date(item.year, item.month, item.day));
    },
    empty() {
      this.$emit("select", "");
    },
    getToday() {
      this.$emit("select", new Date());
    }
  },

  created() {
    this.init();
  }
};

function getDays(year, month) {
  /*
		 * 显示6周
		 * 计算前补多少天
		 */
  var firstDay = new Date(year, month, 1);
  var week = firstDay.getDay();
  //星期天
  if (week == 0) week = 7;
  //补的天数
  var prefill = week - 1;
  if (prefill == 0) prefill = 7;
  //前一天，和最后一天的日期
  var beforeOfFirstDay = new Date(year, month, 0).getDate(),
    lastDay = new Date(year, month + 1, 0).getDate();
  var ret = [];
  for (let i = 1; i <= 42; i++) {
    var day = i - prefill;
    if (day <= 0) {
      //上个月
      day += beforeOfFirstDay;
    } else if (day > lastDay) {
      //下个月
      day -= lastDay;
    }
    ret.push({
      name: day,
      month: month,
      year: year,
      day: i - prefill
    });
  }
  //		function padding (num) {
  //			if(num<10){
  //				return "0"+num
  //			}
  //			return num
  //		}
  return ret.chunk(7);
}
</script>
<style lang="scss">
.rx-datepicker__date {
  width: 230px;
  overflow: hidden;
  /* border: 1px solid #D7DCE6; */
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.rx-datepicker__date-topbar {
  border-bottom: 1px solid #d7dce6;

  .topbar-btn {
    float: left;
  }
  .topbar-info {
    float: left;
    width: 98px;
    text-align: center;
    line-height: 24px;
  }
  .topbar-info__year,
  .topbar-info__month{
    cursor: pointer;
  }
}
</style>

